<template>
  <div class="inner">
    <!-- 表格 -->
    <el-row style="margin-top: 0px">
      <el-col :span="24">
        <el-table
          border
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9F9F9' }"
          :data="tableData"
          :show-summary="tableSetting.showSummary"
          highlight-current-row
          v-loading="tableLoading"
          @selection-change="handleAllChoose"
          style="width: 100%"
          @sort-change="sortChange"
          :cell-style="cellStyle"
        >
          <el-table-column
            v-if="tableSetting.tabletype == 'selection'"
            type="selection"
            width="55"
          ></el-table-column>

          <el-table-column
            v-for="item in tableSetting.options"
            :width="item.width"
            :key="item.index"
            :prop="item.prop"
            :align="item.align || 'center'"
            :label="item.label"
            :sortable="item.sortable"
            :show-overflow-tooltip="true"
            :formatter="formatter"
          ></el-table-column>

          <el-table-column
            v-for="item in tableSetting.options2"
            :width="item.width"
            :key="item.index"
            :prop="item.prop"
            :align="item.align || 'center'"
            :label="item.label"
            :show-overflow-tooltip="true"
            v-show="item.isShow"
            :formatter="formatter"
          ></el-table-column>

          <el-table-column
            v-for="item in tableSetting.optionsColor"
            :key="item.index"
            :prop="item.prop"
            :align="item.align || 'center'"
            :label="item.label"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row['isRed'] == true"
                :style="{ color: item.color }"
                >{{ scope.row[item.prop] }}</span
              >
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="tableSetting.switch.label"
            align="center"
            v-if="tableSetting.switch != undefined"
          >
            <template slot-scope="scope">
              <el-switch
                @change="
                  handleTable(
                    tableSetting.switch.handleName,
                    scope.row,
                    scope.$index
                  )
                "
                v-model="scope.row[tableSetting.switch.text]"
                :active-text="scope.row[tableSetting.switch.text] ? '是' : '否'"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column
            :label="tableSetting.placed.label"
            align="center"
            v-if="tableSetting.placed != undefined"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="
                  handleTable(
                    tableSetting.placed.handleName,
                    scope.row,
                    scope.$index
                  )
                "
                v-model="scope.row[tableSetting.placed.text]"
                >置顶</el-button
              >
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            :width="tableSetting.width"
            v-if="
              tableSetting.btns != undefined && tableSetting.btns.length > 0
            "
          >
            <template slot-scope="scope">
              <el-button
                v-for="el in tableSetting.btns"
                style="position: relative"
                plain
                :key="el.index"
                :size="el.size || 'small'"
                :type="el.type || 'primary'"
                :disabled="el.disabled"
                v-show="!el.show || (el.show && el.show(scope.row))"
                @click="handleTable(el.handleName, scope.row, scope.$index)"
              >
                {{ el.text }}
                <span
                  v-if="
                    scope.row.read &&
                    scope.row.read == true &&
                    el.text == '记录'
                  "
                  class="red"
                ></span>
              </el-button>
              <!-- <el-button
                style="position: relative"
                v-if="
                  (scope.row.devStatus == 0 || scope.row.devStatus == 1) &&
                  scope.row.status != 10
                "
                type="warning"
                size="mini"
                plain
                @click="devStatus(scope.row)"
                >{{ scope.row.devStatus == 0 ? "暂停" : "开启" }}</el-button
              >
              <el-button
                style="position: relative"
                :type="scope.row.showFlag == 0 ? 'success' : 'warning'"
                size="mini"
                v-if="
                  (scope.row.devStatus == 0 || scope.row.devStatus == 1) &&
                  scope.row.status != 10
                "
                plain
                @click="showFlag(scope.row)"
                >{{ scope.row.showFlag == 0 ? "显示" : "取消" }}</el-button
              > -->

              <el-dropdown v-if="scope.row.status && scope.row.status != 10" trigger="click">
                <el-button
                  size="mini"
                  type="info"
                  plain
                  class="el-dropdown-link"
                >
                  更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="records(scope.row)"
                    >记录</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="projectObjective(scope.row)"
                    >项目目标</el-dropdown-item
                  >
                  <el-dropdown-item
                    @click.native="devStatus(scope.row)"
                    v-if="
                      (scope.row.devStatus == 0 || scope.row.devStatus == 1) &&
                      scope.row.status != 10
                    "
                    >{{
                      scope.row.devStatus == 0 ? "暂停" : "开启"
                    }}</el-dropdown-item
                  >
                  <el-dropdown-item
                    @click.native="showFlag(scope.row)"
                    v-if="
                      (scope.row.devStatus == 0 || scope.row.devStatus == 1) &&
                      scope.row.status != 10
                    "
                    >{{
                      scope.row.showFlag == 0 ? "显示" : "取消"
                    }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 分页 -->
    <el-row class="pagination">
      <el-col>
        <el-pagination
          style="float: right"
          background
          @size-change="handleSizeChange"
          @current-change="handleChangePage"
          :current-page="tableParams.pn"
          :page-sizes="[5, 10, 15, 20, 30, 40]"
          :page-size="tableParams.ps"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          v-if="total > 0"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { log, debug } from "util";
import { setTimeout } from "timers";
import { mapGetters } from "vuex";

export default {
  props: ["tableSetting", "pns", "pn1"],
  components: {},
  data() {
    return {
      tableLoading: false, //表格laoding
      tableData: [], //表格数据
      tableParams: {
        pn: 1,
        ps: 10,
        docParentId: "",
      }, //表格请求参数
      manyData: [], //多选的数据
      total: 0, //页面数据总数
    };
  },
  mounted() {
    if (this.tableSetting.init == undefined) {
      this.initData();
    } else {
      setTimeout(this.initData, this.tableSetting.init);
    }
  },

  computed: {
    ...mapGetters(["docParentId"]),
  },
  watch: {
    docParentId(newValue) {
      this.tableParams.docParentId = newValue;
    },
  },

  methods: {
    //表格请求数据
    initData(data = null, isPn = null) {
      if (this.tableSetting.defaulteParams) {
        this.tableParams = {
          ...this.tableParams,
          ...this.tableSetting.defaulteParams,
        };
        if (data) {
          //暂时写死判断 后期在优化
          this.tableParams.docParentId = data.docParentId;
          // this.tableParams.defaulteParams.docParentId =  data.docParentId
        } else {
          this.tableParams.docParentId = this.docParentId;
        }
        if (this.tableParams.projectKeyWord) {
          this.tableParams.pn = 1;
        }
        if (
          this.tableSetting.defaulteParams.keyword ||
          this.tableSetting.defaulteParams.level
        ) {
          this.tableParams.pn = 1;
        }
        if (isPn) {
          this.tableParams.pn = 1;
        }
        // if(sessionStorage.getItem('pn')){
        //   this.tableParams.pn = sessionStorage.getItem('pn')
        // }
      }

      //这里写接口请求表格
      this.tableLoading = true;
      if (this.tableSetting.tableApiFn) {
        this.tableSetting.tableApiFn(this.tableParams).then((res) => {
          this.tableLoading = false;
          if (res.data.total == undefined) {
            if (res.data.usersIn) {
              this.tableData = res.data.usersIn;
              this.$emit("getdata", res.data);
            } else if (res.data.yearHoursList) {
              //周报
              this.tableData = res.data.yearHoursList;
              this.$emit("getdata", res.data);
            } else if (res.data.projectWorkingHours) {
              //年报
              this.tableData = res.data.projectWorkingHours;
              this.$emit("getdata", res.data);
            } else {
              //console.log('----------->', res)
              this.tableData = res.data;
            }
            this.total = 0;
          } else {
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.pn = res.data.current;
            this.$emit("getTotal", this.pn);
          }
        });
      }
    },

    //多选表格事件
    handleAllChoose(val) {
      this.$emit("showColse", val);
    },
    devStatus(row) {
      this.$emit("PauseToOpen", row);
    },
    showFlag(row) {
      this.$emit("ShowFlag", row);
    },
    records(row) {
      this.$emit("record", row);
    },
    projectObjective(row) {
      this.$emit("projectObjectives", row);
    },

    //根据项目级别 选取不同颜色
    cellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === "项目级别" && row.row.level === "A") {
        return "color:#f56c6c";
      } else if (row.column.label === "项目级别" && row.row.level === "B") {
        return "color:#f5942c";
      } else if (row.column.label === "项目级别" && row.row.level === "C") {
        return "color:#40b46f";
      } else if (row.column.label === "项目级别" && row.row.level === "D") {
        return "color:#409eff";
      } else if (row.column.label === "开发状态" && row.row.devStatus !== 0) {
        return "color: #52b690";
      }
    },

    formatter(row, column, cellValue, index) {
      if (column.label == "性别") {
        return row.sex == 1 ? "男" : "女";
      } else if (column.label == "学历") {
        return row.edu == 1
          ? "大专"
          : row.edu == 2
          ? "本科"
          : row.edu == 3
          ? "硕士"
          : "博士";
      } else if (column.label == "状态") {
        return row.state == 0 ? "已转正" : "未转正";
      } else if (column.label == "合同状态") {
        return row.lastStatus == 1 ? "已到期" : "合同中";
      } else if (column.label == "账号状态") {
        return row.enabled == 1 ? "正常" : "已禁用";
      } else if (column.label == "上传时间") {
        return row.createTime.replace(/T/g, " ");
      } else if (column.label == "项目创建时间") {
        return row.createTime.replace(/T/g, " ");
      } else if (column.label == "创建时间") {
        return row.createTime.substring(0, 11);
      } else if (column.label == "开发状态") {
        return row.devStatus === 0 ? "执行中" : "暂停开发";
      } else if (column.label == "大屏显示状态") {
        return row.showFlag === 0 ? "未显示" : "已显示";
      } else {
        return cellValue;
      }
    },
    //多选删除
    handleDeleteAll() {
      this.$emit("handleCommon", "handletableChoose", this.manyData);
    },
    //表格事件
    handleTable(name, row, index) {
      //判断一下name是否等于查看工时
      // if(name === "查看工时"){
      //   sessionStorage.setItem('pn', this.pn)
      // }
      this.$emit("handleCommon", name, row, index);
    },
    //分页
    handleChangePage(index) {
      this.tableParams.pn = index;
      console.log("index", index);
      this.initData();
    },
    handleSizeChange(val) {
      this.tableParams.ps = val;
      sessionStorage.setItem("ps", val);
      this.initData();
    },
    //条件查询
    handleSearch() {
      this.tableParams.pn = 1;
      this.initData();
    },
    //添加
    handleAdd() {
      this.$emit("handleAdd");
    },
    //导出
    exportExcel() {
      this.$emit("exportExcel");
    },
    //表格某一项点击事件
    handleTableCilk(name, row) {
      this.$emit("handleCommon", name, row);
    },
    downFile(row) {
      this.$emit("handleDownFile", row);
    },
    //监听表单变化  表格参数
    handleChange(value, params) {
      this.tableParams[params] = value;
      // this.initData();
    },
    sortChange(column, prop, order) {
      let flag = 0;
      switch (column.order) {
        case "ascending":
          flag = 1;
          break;
        case "descending":
          flag = 2;
          break;
        default:
          flag = 0;
      }
      this.$emit("sortTable", { val: column.prop, flag });
    },
  },
  created() {
    if (this.pns) {
      this.tableParams.pn = this.pns;
    };
    if (this.pn1) {
      this.tableParams.pn = this.pn1;
    };
    // console.log("表格pns", this.pns);
    // console.log("表格pn1", this.pn1);
    if (sessionStorage.getItem("tableParams") != null) {
      this.tableParams = JSON.parse(sessionStorage.getItem("tableParams"));
    }
    this.tableParams = {
      ...this.tableParams,
      ...this.tableSetting.defaulteParams,
    };
    // console.info(this.tableParams);
  },
};
</script>

<style scoped>
@import url("../../../static/font/iconfont.css");
.pagination {
  background: white;
  padding: 20px;
}
/* .inner{
  background: #f2f2f2;
} */
.filter {
  display: flex;
  background: white;
  /* padding: 20px; */
  padding: 0 0 20px 0;
}

.item {
  margin-top: 10px;
  /*margin-right: 40px;*/
}
.red {
  position: absolute;
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: 0;
  right: 0;
  background-color: red;
}
</style>
